<!--
 * @Description: 
 * @Version: 0.0.1
 * @Autor: zhj1214
 * @Date: 2021-12-01 18:46:11
 * @LastEditors: zhj1214
 * @LastEditTime: 2021-12-15 15:57:05
-->
<template>
  <div id="nav" class="view">
    <div class="left">
      <n-layout-sider
        show-trigger="bar"
        @collapse="collapsedClick(true)"
        @expand="collapsedClick(false)"
        :collapsed="collapsed"
        collapse-mode="width"
        :collapsed-width="64"
        :native-scrollbar="false"
        class="layout-sider"
      >
        <AsideMenu v-model:collapsed="collapsed" v-model:location="getMenuLocation" />
      </n-layout-sider>
    </div>
    <div class="right">
      <div class="header">
        <div class="title">{{ meta.title }}</div>
      </div>
      <!-- 主应用渲染区，用于挂载主应用路由触发的组件 -->
      <div class="contentView" v-show="$route.name">
        <!-- <router-view /> -->
        <MainView></MainView>
      </div>
      <!-- 子应用渲染区，用于挂载子应用节点 -->
      <div class="contentView" v-show="!$route.name" id="contentapp"></div>
      <!-- <div class="footer">备案号信息</div> -->
    </div>
  </div>
</template>
<script>
import { NLayoutSider } from "naive-ui";
import { useRoute } from "vue-router";
import { defineComponent, ref, toRefs, reactive, watch } from "vue";
import AsideMenu from "./components/Menu/index.vue";
import MainView from "./components/Main/index.vue";

export default defineComponent({
  name: "BasicLayout",
  components: {
    NLayoutSider,
    AsideMenu,
    MainView,
  },
  setup() {
    const collapsed = ref(false);
    const currentRoute = useRoute();
    console.log("currentRoute:", currentRoute.meta);
    const meta = reactive(currentRoute.meta);
    watch(
      () => currentRoute.meta,
      (newVal, oldval) => {
        console.log(newVal.title, "11111111111", oldval.title);
        meta.title = newVal.title;
      }
    );
    const contentW = ref("300px");
    const collapsedClick = val => {
      collapsed.value = val;
      console.log("contentW.value", contentW.value);
      contentW.value = val ? "64px" : "300px";
      console.log("contentW.value1111", contentW.value);
    };

    return {
      collapsed,
      meta,
      contentW,
      collapsedClick,
    };
  },
});
</script>
<style scoped lang="scss">
.view {
  display: flex;
  height: 100vh;
  .left {
    background-color: white;
    // overflow-y: scroll;
    .layout-sider {
      min-height: 100vh;
      box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
      position: relative;
      z-index: 13;
      transition: all 0.2s ease-in-out;
    }
  }
  .right {
    width: calc(100vw - v-bind("contentW"));
    height: 100vh;
    .header {
      height: 64px;
      box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
      transition: all 0.2s ease-in-out;
      width: 100%;
      padding: 0 24px;
      .title {
        font-size: 22px;
        font-weight: 900;
        line-height: 64px;
      }
    }
    .contentView {
      height: calc(100% - 64px);
      overflow-y: scroll;
      padding: 24px;
    }
    .footer {
      height: 64px;
      box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
      transition: all 0.2s ease-in-out;
      width: 100%;
    }
  }
}
</style>
